<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>

<body class="bg-gray-100 h-screen flex items-center justify-center">
<div class="bg-white p-8 rounded shadow-md w-full max-w-md">
  <h2 class="text-2xl font-bold mb-4 text-center">注册</h2>
  <form id="regForm">
    <div class="mb-4">
      <label for="studentId" class="block text-gray-700 font-bold mb-2">学号</label>
      <input type="text" id="studentId" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500" required>
    </div>
    <div class="mb-4">
      <label for="regName" class="block text-gray-700 font-bold mb-2">姓名</label>
      <input type="text" id="regName" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500" required>
    </div>
    <div class="mb-4">
      <label for="gender" class="block text-gray-700 font-bold mb-2">性别</label>
      <input type="text" id="gender" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
    </div>
    <div class="mb-4">
      <label for="birthDate" class="block text-gray-700 font-bold mb-2">出生日期 (yyyy-MM-dd)</label>
      <input type="text" id="birthDate" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
    </div>
    <div class="mb-4">
      <label for="idCard" class="block text-gray-700 font-bold mb-2">身份证号</label>
      <input type="text" id="idCard" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
    </div>
    <div class="mb-4">
      <label for="college" class="block text-gray-700 font-bold mb-2">学院</label>
      <input type="text" id="college" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
    </div>
    <div class="mb-4">
      <label for="major" class="block text-gray-700 font-bold mb-2">专业</label>
      <input type="text" id="major" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
    </div>
    <div class="mb-4">
      <label for="className" class="block text-gray-700 font-bold mb-2">班级</label>
      <input type="text" id="className" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
    </div>
    <div class="mb-4">
      <label for="phone" class="block text-gray-700 font-bold mb-2">电话</label>
      <input type="text" id="phone" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
    </div>
    <div class="mb-4">
      <label for="email" class="block text-gray-700 font-bold mb-2">邮箱</label>
      <input type="text" id="email" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500">
    </div>
    <div class="mb-4">
      <label for="regUsername" class="block text-gray-700 font-bold mb-2">用户名</label>
      <input type="text" id="regUsername" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500" required>
    </div>
    <div class="mb-4">
      <label for="regPassword" class="block text-gray-700 font-bold mb-2">密码</label>
      <input type="password" id="regPassword" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-blue-500" required>
    </div>
    <div class="flex space-x-4">
      <button type="submit" class="w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 focus:outline-none focus:shadow-outline-green active:bg-green-800">注册</button>
      <button type="button" class="w-full bg-gray-500 text-white py-2 px-4 rounded hover:bg-gray-600 focus:outline-none focus:shadow-outline-gray active:bg-gray-800" onclick="window.location.href='login.html'">取消注册</button>
    </div>
  </form>
  <div id="regMessage" class="mt-4 text-center"></div>
</div>

<script>
  const regForm = document.getElementById('regForm');
  const regMessage = document.getElementById('regMessage');

  regForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const studentId = document.getElementById('studentId').value;
    const name = document.getElementById('regName').value;
    const gender = document.getElementById('gender').value;
    const birthDate = document.getElementById('birthDate').value;
    const idCard = document.getElementById('idCard').value;
    const college = document.getElementById('college').value;
    const major = document.getElementById('major').value;
    const className = document.getElementById('className').value;
    const phone = document.getElementById('phone').value;
    const email = document.getElementById('email').value;
    const username = document.getElementById('regUsername').value;
    const password = document.getElementById('regPassword').value;

    try {
      const response = await fetch('reg', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `studentId=${encodeURIComponent(studentId)}&name=${encodeURIComponent(name)}&gender=${encodeURIComponent(gender)}&birthDate=${encodeURIComponent(birthDate)}&idCard=${encodeURIComponent(idCard)}&college=${encodeURIComponent(college)}&major=${encodeURIComponent(major)}&className=${encodeURIComponent(className)}&phone=${encodeURIComponent(phone)}&email=${encodeURIComponent(email)}&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`
      });

      const result = await response.text();

      if (result === 'Y') {
        regMessage.textContent = '注册成功！';
        regMessage.classList.add('text-green-500');
        regMessage.classList.remove('text-red-500');
        // 注册成功后跳转回登录页面
        window.location.href = 'login.html';
      } else if (result === 'EID') {
        regMessage.textContent = '学号已存在，请重新输入。';
        regMessage.classList.add('text-red-500');
        regMessage.classList.remove('text-green-500');
      } else if (result === 'EUSER') {
        regMessage.textContent = '用户名已存在，请重新输入。';
        regMessage.classList.add('text-red-500');
        regMessage.classList.remove('text-green-500');
      } else {
        regMessage.textContent = '注册失败，请检查输入信息。';
        regMessage.classList.add('text-red-500');
        regMessage.classList.remove('text-green-500');
      }
    } catch (error) {
      regMessage.textContent = '发生错误，请稍后重试。';
      regMessage.classList.add('text-red-500');
      regMessage.classList.remove('text-green-500');
    }
  });
</script>
</body>

</html>